.preview_user {
  margin-top: 1rem;
}
.preview_user .cover-box {
  position: relative;
  height: 15rem;
  background-size: cover;
  background-position: center;
}
.preview_user .cover-box .user-att-box {
  flex-wrap: nowrap;
  position: absolute;
  bottom: -2rem;
  left: 2rem;
}
.preview_user .cover-box .user-att-box .left-box {
  flex-shrink: 0;
}
.preview_user .cover-box .user-att-box .user-avatar {
  width: 4rem;
  height: 4rem;
  background-size: cover;
  background-position: center;
  border-radius: 5px;
  box-shadow: 0px 0px 10px 0px white;
  margin-right: 1rem;
}
.preview_user .cover-box .user-att-box .right-box .user-name {
  color: white;
  text-transform: capitalize;
  line-height: 2rem;
}
.preview_user .cover-box .user-att-box .right-box .user-email {
  line-height: 2rem;
}
.preview_user .conatiner {
  margin-top: 4rem;
  margin-bottom: 2rem;
  justify-content: space-between;
}
.preview_user .conatiner .info-box {
  width: 45%;
}
.preview_user .conatiner .info-box .top-box {
  box-sizing: border-box;
  padding: 1rem;
  background-color: black;
  transition: all 0.25s ease-in-out;
  color: white;
  text-transform: uppercase;
}
.preview_user .conatiner .info-box .top-box:hover {
  background-color: #ff4545;
}
.preview_user .conatiner .info-box .top-box:hover + .bottom-box {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
}
.preview_user .conatiner .info-box .bottom-box {
  font-size: 0.9rem;
  box-sizing: border-box;
  padding: 1rem;
  min-height: 15rem;
  background-color: white;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  background-size: cover;
  background-position: center;
}
.preview_user .user-article-box .user-article {
  box-sizing: border-box;
  padding: 1rem;
  width: 22.5%;
  height: 10rem;
  background-size: cover;
  background-position: center;
  color: white;
  margin-bottom: 1rem;
  margin-right: 3.3%;
  border-radius: 5px;
}
.preview_user .user-article-box .user-article:nth-of-type(4n) {
  margin-right: 0;
}
@media (max-width: 1250px) {
  .preview_user .conatiner {
    margin-top: 1rem;
  }
  .preview_user .conatiner .info-box {
    width: 100%;
    margin-top: 2rem;
  }
  .preview_user .user-article-box .user-article {
    width: 30%;
    margin-right: 5%;
  }
  .preview_user .user-article-box .user-article:nth-of-type(4n) {
    margin-right: 5%;
  }
  .preview_user .user-article-box .user-article:nth-of-type(3n) {
    margin-right: 0;
  }
}
@media (max-width: 768px) {
  .preview_user .user-article-box .user-article {
    width: 47.5%;
    margin-right: 5%;
  }
  .preview_user .user-article-box .user-article:nth-of-type(4n),
  .preview_user .user-article-box .user-article:nth-of-type(3n) {
    margin-right: 5%;
  }
  .preview_user .user-article-box .user-article:nth-of-type(2n) {
    margin-right: 0;
  }
}
@media (max-width: 578px) {
  .preview_user .user-article-box .user-article {
    width: 100%;
    margin-right: 0 !important;
  }
}
